<link rel="ractive" href="./navbar-nav-c.html" name="NavbarNav">

<header class="header">
	{{#if sponsorsOnTop}}
		<div class="header-sponsors header-sponsors-top">
			<div class="container">
				<a target="_blank" href="http://www.cedexis.com/"><img src="/img/sponsors-header/cedexis.png"></a>
				<a target="_blank" href="http://tracking.maxcdn.com/c/47243/36539/378"><img src="/img/sponsors-header/maxcdn.png"></a>
				<a target="_blank" href="https://www.cloudflare.com/"><img src="/img/sponsors-header/cloudflare.png"></a>
				<a target="_blank" href="https://www.keycdn.com/"><img src="/img/sponsors-header/keycdn.png"></a>
				<a target="_blank" href="https://nsone.net/"><img src="/img/sponsors-header/nsone.png"></a>
			</div>
		</div>
	{{/if sponsorsOnTop}}

	<nav class="navbar navbar-default">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-0 col-xs-4 col-xs-offset-2">
					<a class="navbar-brand" href="/"><img src="/img/logo-34.png" height="34"></a>
				</div>

				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

				<div class="collapse navbar-collapse" id="header-navbar">
					<div class="col-md-10 col-sm-12 col-xs-18">
						<NavbarNav></NavbarNav>
					</div>

					<div class="col-md-6 col-sm-6 col-sm-offset-0 col-xs-16 col-xs-offset-2 xs-padding">
						<input type="text" class="search-input" value="{{query}}" placeholder="Search more than {{nbProjects}} open source projects..." on-input="search()">
					</div>

					<div class="col-md-3 col-sm-3 col-xs-4 xs-padding md-right xs-right">
						<a href="https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md" class="btn btn-primary"><i class="fa fa-cloud-upload"></i>Add Project</a>
					</div>
				</div>
			</div>
		</div>
	</nav>

	{{#unless sponsorsOnTop}}
		<div class="header-sponsors header-sponsors-bottom">
			<div class="container">
				<div class="col-lg-20 col-lg-offset-2 col-md-22 col-md-offset-1 col-sm-24 col-sm-offset-0 col-xs-20 col-xs-offset-2">
					<a target="_blank" href="http://www.cedexis.com/"><img src="/img/sponsors-header/cedexis.png"></a>
					<a target="_blank" href="http://tracking.maxcdn.com/c/47243/36539/378"><img src="/img/sponsors-header/maxcdn.png"></a>
					<a target="_blank" href="https://www.cloudflare.com/"><img src="/img/sponsors-header/cloudflare.png"></a>
					<a target="_blank" href="https://www.keycdn.com/"><img src="/img/sponsors-header/keycdn.png"></a>
					<a target="_blank" href="https://nsone.net/"><img src="/img/sponsors-header/nsone.png"></a>
					<a class="header-become-a-sponsor" href="/sponsors/become-a-sponsor">Become a sponsor</a>
				</div>
			</div>
		</div>
	{{/unless sponsorsOnTop}}
</header>

{{#unless sponsorsOnTop}}
	<div class="header-margin-bottom"></div>
{{/unless sponsorsOnTop}}

<script>
	component.exports = {
		data: function () {
			return {
				offsetTop: 124,
				stickyOnBottom: true,
			};
		},
		oninit: function () {
			if (!Ractive.isServer) {
				var countProjects = require('public/js/utils/count-projects');
				var _this = this;

				// Show number of hosted projects.
				countProjects().then(function (nbProjects) {
					nbProjects && _this.set('nbProjects', nbProjects);
				});
			}
		},
		oncomplete: function () {
			if (location.pathname === '/' && this.get('query')) {
				var input = this.find('input');
				var value = input.value;

				input.focus();

				// Make sure the cursor is at the end of the input.
				input.value = '';
				input.value = value;
			} else {
				this.set('prevQuery', this.get('query'));
			}

			this.findAll('a').forEach(function (a) {
				var $a = $(a);

				if (location.pathname.indexOf($a.attr('href')) === 0) {
					$a.addClass('active');
				} else {
					$a.removeClass('active');
				}
			});
		},
		search: function () {
			// IE likes to fire "input" events for no particular reason. Make sure the query has actually changed.
			if (location.pathname !== '/' && this.get('query') !== this.get('prevQuery')) {
				this.set('app.config.animateScrolling', false);
				this.get('app.router')
					.dispatch('/?query=' + encodeURIComponent(this.find('input').value) + '&collection=' + encodeURIComponent(JSON.stringify(this.root.get('collection'))));
			}
		},
	};
</script>
